@import "./common.scss";

body{
    font-size: 14px;
}
.container{
    position: relative;
    display:none;
    .header{
        box-sizing: border-box;
        position:fixed;
        top:0;
        left:0;
        padding:0 pr(11);
        height: pr(45);
        width: 100%;
        position: absolute;
        background:#f6f6f6;
        border-bottom:pr(1) solid #ccc;
        display:flex;
        justify-content: space-between;
        align-items:center;
        input{
            height: pr(28);
            flex:1;
            border:pr(1) solid #999;
            box-shadow: pr(-1) pr(1) pr(1) #ccc;
            border-radius: pr(4);
            padding-left:pr(10);
        }
        a{
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            width:pr(40);
            height: 100%;
            margin-left:pr(7);
            color:#666;
            img{
                width: pr(18);
                height: pr(16);
            }
        }
    }
    .banner{
        // margin-top:pr(45);
        // height:pr(83);
        padding-top:pr(45);
        background: green;
        img{
            width: 100%;
        }
        .swiper-pagination{
            text-align: right;
            .swiper-pagination-bullet{
                width:pr(10);
                height:pr(10);
                border-radius:pr(5);
                background: red;
            }
            .swiper-pagination-bullet-active{
                background: skyblue;
                width:pr(20);
            }
        }
    }
    .main{
        padding:pr(5) pr(5) pr(0) ;
        background: #ddd;

        .navbar{
            box-sizing: border-box;
            height:pr(100);
            background: #fff;
            border-radius:pr(5);
            display:flex;
            justify-content:space-around;
            margin-bottom: pr(5);
            a{
                padding:pr(10) 0 pr(12);
                flex:1;
                display:flex;
                flex-direction:column;
                justify-content:space-between;
                align-items:center;
                color:#999;
                img{
                    width: pr(56);
                    height:pr(56);
                }
            }
        }
        .center{
            border-radius: pr(10);
            overflow: hidden;

            .section1 {
                background: linear-gradient(to right,#fa5a55,#fa984e);
                .left{
                    background: url(../imgs/item1.png) center bottom/100% auto no-repeat;
                    //控制图片随尺寸变大做的判断
                    @media screen and(min-width:500px){
                        background: url(../imgs/item1.png) center bottom/pr(134) auto no-repeat
                    }
                }
            }
            .section2 {
                background: linear-gradient(to right,#4b90ed,#53bbed);
                margin:pr(5) pr(0);
                .left{
                    background: url(../imgs/item2.png) center bottom/100% auto no-repeat;
                    //控制图片随尺寸变大做的判断
                    @media screen and(min-width:500px){
                        background: url(../imgs/item2.png) center bottom/pr(134) auto no-repeat
                    }
                }
            }
            .section3 {
                background: linear-gradient(to right,#53bbed,#6ad45a);
                .left{
                    background: url(../imgs/item3.png) center bottom/100% auto no-repeat;
                    //控制图片随尺寸变大做的判断
                    @media screen and(min-width:500px){
                        background: url(../imgs/item3.png) center bottom/pr(134) auto no-repeat
                    }
                }
            }
            
            

            .section{
                height:pr(100);
                
                display:flex;
                
                .left{
                    flex:1;
                    border-right:pr(1) solid #fff;
                    text-align: center;
                    padding-top:pr(20);
                    color:#fff;
                   
                }
                .right{
                    flex:2;
                    display:flex;
                    flex-wrap:wrap;
                    a{
                        width:50%;
                        height: 50%;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        box-sizing:border-box;
                        color:#fff;
                        &:nth-child(n+3){
                            border-top:pr(1) solid #fff;
                        }
                        &:nth-child(odd){
                            border-right:pr(1) solid #fff;
                        }
                    }
                }
            }
        }
        .bottombar{
            margin-top:pr(5);
            height:pr(121);
            background: #fff;
            border-radius:pr(10);
            display:flex;
            flex-wrap:wrap;
            a{
                width:16.666666%;
                display:flex;
                flex-direction:column;
                padding:pr(7) 0;
                justify-content:space-between;
                align-items:center;
                color:#666;
            }
        }
    }
    
}
.searchpage{
    position: relative;
    // display:none;
    .header{
        box-sizing: border-box;
        position:fixed;
        top:0;
        left:0;
        padding:0 pr(11);
        height: pr(45);
        width: 100%;
        position: absolute;
        background:#e6f0f7;
        border-bottom:pr(1) solid #ccc;
        display:flex;
        justify-content: space-between;
        align-items:center;
        .searchtxt{
            height: pr(28);
            flex:1;
            border:pr(1) solid #999;
            box-shadow: pr(-1) pr(1) pr(1) #ccc;
            border-radius: pr(4);
            padding-left:pr(10);
        }
        .back{
            width:pr(30);
            height: pr(28);
            background: url("../imgs/back.png") pr(0) pr(0)/ auto 100% no-repeat;
        }
        .search{
            display:flex;
            justify-content:center;
            align-items:center;
            width:pr(40);
            height: 100%;
            color:#666;
        }
    }
    .searchhistory{
        padding-top:pr(45);
        p{
            height:pr(30);
            line-height: pr(30);
            padding-left:pr(10);
        }
        ul{
            li{
                padding-left:pr(20);
                height:pr(45);
                line-height: pr(45);
                border-top: pr(1) solid #ddd;
                &:last-child{
                    text-align: center;
                    color:#4b90ed;
                }
            }
        }
        
    }
}